<script setup>
  // 1.对象的重要方法
  // const user = {
  //   name: "careathers",
  //   age: 18,
  //   addr: "ChangShaSocialWorkCollege"
  // }

  // 获取对象所有的键
  // const userNames = Object.keys(user)
  // console.log(userNames)
  // 获取对象所有的值
  // const userValues = Object.values(user)
  // console.log(userValues)

  // 2.拓展运算符 ...
  // -- 1，解构赋值收集剩余所有数据
  // const {name, ...newUserObject} = user
  // console.log(name, newUserObject)

  // -- 2，复制数组或对象
  // 以对象为例
  // const user = {
  //   name: "careathers",
  //   age: 18,
  //   addr: "ChangShaSocialWorkCollege"
  // }
  // -- 先使用普通复制
  // -- 使用直接赋值的方式，两个对象本质都是指向同一内存空间
  // const newUser = user
  // newUser.name = "Lucy"
  // console.log(user)
  // console.log(newUser)

  // -- 使用拓展运算符进行复制
  // -- 这两个变量都是独立的个体，处于不同的内存空间
  // const newUser = {...user}
  // newUser.name = "Lucy"
  // console.log(user)
  // console.log(newUser)

  // -- 3，合并对象或数组
  // -- 使用...拓展运算符，会直接将容器中的所有数据取出，由此，我们可以将其用作合并对象/数组
  // -- 以对象为例

  // 合并对象时，若是不同对象中存在相同key的键值对，则该key的值最终为最后一个赋值的值
  // const user1 = {
  //   name: "one",
  //   age: 18 
  // }
  // const user2 = {
  //   name: "two",
  //   addr: "ChangShaSocialWorkCollege"
  // }
  // const user = {
  //   ...user1,
  //   ...user2
  // }
  // console.log(user)

  // 3.序列化与反序列化
  // -- 序列化
  // const user = {
  //   name: "careathers",
  //   age: 18,
  //   addr: "ChangShaSocialWorkCollege"
  // }
  // const userJsonString = JSON.stringify(user)
  // console.log(userJsonString)

  // -- 反序列化
  // const newUser = JSON.parse(userJsonString)
  // console.log(newUser)

  // 4.Web存储
  // 使用localStorage对象进行web存储操作，以存储对象为例

  // const USER_KEY = "user-key"

  // const user = {
  //   name: "careathers",
  //   age: 18
  // }

  // -- 将对象存储至本地
  // --- 1，将对象序列化后进行存储
  // localStorage.setItem(USER_KEY, JSON.stringify(user))
  // console.log("存储成功！")

  // -- 从本地中取出数据
  // const retUser = JSON.parse(localStorage.getItem(USER_KEY))
  // console.log(retUser)

  // -- 从本地中删除指定数据
  // localStorage.removeItem(USER_KEY)
  // console.log("删除成功！")


</script>

<template>
  <div>
    <!-- <span v-html="str"></span> -->
  </div>
</template>

<style scoped>

</style>